<template>
    <div>
        <div class="input-box">
            <slot name="prefix"></slot>
            <input :type="props.type" :placeholder="props.placeholder" v-model="model" @blur="handleBlur">
            <slot name="suffix"></slot>
        </div>
        <div class=" h-5 text-red-500">{{ props.message }}</div>
    </div>
</template>
<script setup lang="ts">

const model = defineModel<string | number>()

interface IProps {
    type?: string
    placeholder?: string
    message?: string
}

const props = withDefaults(defineProps<IProps>(), {
    type: 'text',
    placeholder: '',
    message: ''
})

const emits = defineEmits(['blur'])

const handleBlur = () => {
    emits('blur')
}

</script>
<style scoped></style>